<template>
  <div class='container'>
    <el-card class="box-card">
        <Screen ref="ScreenRef" :total.sync="total" :current.sync="current" :tableData.sync="tableData" :AlltableData="AlltableData" ></Screen>
         <!-- 数据条数 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
         :closable="false"
        type="info"
        show-icon>
      </el-alert>
      <!-- 数据展示 -->
        <el-table
            :header-cell-style="{background:'#fafafa','border-bottom':'2px solid #e8e8e8'}"
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="number" label="试题编号" ></el-table-column>
            <el-table-column prop="subject" label="学科" ></el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column prop="questionType" label="题型">
              <template slot-scope="scope">
                {{scope.row.questionType | questionType}}
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干">
              <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间">
              <template slot-scope="scope">
              {{scope.row.addDate| addDate}}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度">
              <template slot-scope="scope">
              {{scope.row.difficulty|difficulty}}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人"> </el-table-column>
            <el-table-column label="操作" width="180">
                  <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-view" @click="previewBtn(scope.row)" circle></el-button>
                  <el-button @click="$router.push({path:'new',query:{id:scope.row.id,isEdit:1}})" size="mini" type="success" icon="el-icon-edit" circle></el-button>
                  <el-button @click="delBtn(scope.row)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                  <el-button @click="choicenessBtn(scope.row.id,1)" size="mini" type="warning" icon="el-icon-check" circle></el-button>
                  </template>
            </el-table-column>

    </el-table>

    <!-- 分页按钮 -->
    <el-pagination
    style="margin-top:10px;float: right;margin-bottom:10px"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :page-size='current.pagesize'
      :current-page="current.page"
      layout=" sizes, prev, pager, next, jumper"
      :total="total"
      >
    </el-pagination>
    <!-- 点击预览 -->
    <el-dialog v-if="dialogVisible" title="题目预览" :visible.sync="dialogVisible" width="55%" >
      <preview :questionDetails="questionDetails" :dialogVisible="dialogVisible"></preview>
      <div  class="dialog-footer" >
        <el-button  type="primary" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Screen from '../../components/Screen/index.vue'
import preview from '../components/questions-preview.vue'
import { list, detail, remove, choiceAdd } from '../../api/hmmm/questions'
export default {
  components: { preview, Screen },
  data () {
    return {
      // 数据列表展示
      tableData: [],
      // 所有列表数据
      AlltableData: [],
      current: {
        page: 1,
        pagesize: 5
      }, // 分页数据
      total: 0, // 总数据条数
      dialogVisible: false, // 预览显示与隐藏
      questionDetails: {}, // 题库详情
      formInline: {} // 表单数据
    }
  },
  created () {
    // 调用获取基础题库列表
    this.questionList()
  },
  // 监听dialogVisible
  watch: {
    dialogVisible: {
      handler (newval) {
        if (newval === false) {
          this.questionDetails = {}
        }
      }
    }
  },
  methods: {
    // 基础题库列表
    async  questionList () {
      const res = await list({ ...this.current, ...this.formInline })
      const res1 = await list({ page: 1, pagesize: res.data.counts }) // 拿到所有题库列表
      this.AlltableData = res1.data.items
      // console.log(res1.data.items)
      this.tableData = res.data.items
      // console.log(this.tableData)
      this.total = res.data.counts
    },
    // 每页几条
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.current.pagesize = val
      var flage = false
      for (const key in this.$refs.ScreenRef.formInline) {
        if (this.$refs.ScreenRef.formInline[key] !== '') {
          flage = true
          break
        }
      }
      if (flage === false) {
        this.$refs.ScreenRef.formInline = {}
        this.formInline = this.$refs.ScreenRef.formInline
      } else {
        this.formInline = this.$refs.ScreenRef.formInline
      }
      // 调用获取基础题库列表
      this.questionList()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.current.page = val
      // 调用获取基础题库列表
      this.questionList()
    },
    // 点击预览
    async  previewBtn (row) {
      this.dialogVisible = true
      // console.log(row)
      const res = await detail(row)
      console.log(row, 1111)
      // console.log(res, 123)
      this.questionDetails = res.data
      // console.log(this.questionDetails)
    },
    // 点击删除按钮
    delBtn (row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('成功删除！')
        // 如果删除第最后一页（例如4）的最一条数据之后，页面会显示不正常
        if (this.tableData.length === 1) {
          // console.log(1111)
          this.current.page--
          if (this.current.page === 1) {
            this.current.page = 1
          }
        }
        // 调用获取基础题库列表
        this.questionList()
      }).catch(e => e)
    },
    // 点击加入精选
    choicenessBtn (id, index) {
      // console.log(id, index)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const res = await choiceAdd({ id, choiceState: index })
        // console.log(res)
        if (res.status !== 200) return this.$message.error('加入精选失败!')
        this.$message.success('加入精选成功!')
        // 调用获取基础题库列表
        this.questionList()
      }).catch(e => e)
    }

  }
}
</script>

<style lang="scss" scoped>
.el-alert{
  margin-bottom: 15px;
}
  .container{
    margin: 10px;

    .dialog-footer{
      display: flex;
      justify-content: flex-end;

    }
    .el-button--primary{
      color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
    }
    .el-button--primary:hover{
      background: #409eff;
    border-color: #409eff;
    color: #fff;
    }
    .el-button--success{
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
    }
    .el-button--success:hover{
      background: #67c23a;
    border-color: #67c23a;
    color: #fff;
    }
    .el-button--danger{
      color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    }
    .el-button--danger:hover{
          background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
    }
    .el-button--warning{
      color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1
    }
    .el-button--warning:hover{
      background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
    }
}
</style>
